<template>
  <div class="dynamic">
    <div class="dynamic-container" ref="container">
      <ul
        ref="list"
        :style="{transform: `translateY(${translateY}px)`}"
      >
        <li
          v-for="item in list"
          :key="item.id"
        >
          <el-row>
            <el-col :span="6" class="date">
              {{item.min}}
            </el-col>
            <el-col :span="8" class="user">
              {{item.user}}
            </el-col>
            <el-col :span="10" class="content">
              {{item.des}}
            </el-col>
          </el-row>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeDynamic',
  data() {
    return {
      list: [],
      timer: null, // 定时器
      translateY: 0
    };
  },
  mounted() {
    this.container = this.$refs.container;
    this.listContainer = this.$refs.list;
    this.timer = setInterval(() => {
      this.getData();
    }, 3000);
  },
  methods: {
    getData() {
      this.$api.getAcceptList().then(data => {
        if (!data.length) {
          return;
        }
        this.list.push(...data);
        if (this.listContainer.scrollHeight < this.container.offsetHeight) {
          return;
        }
        this.$nextTick(() => {
          this.translateY -= data.length * 26;
        });
      });
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
};
</script>

<style lang="less" scoped>
  @import '../../../less/global';
  .dynamic {
    margin: 10px 0;
    padding: 10px 0;
    border-radius: 5px;
    background-color: #6ca7fe;
    .dynamic-container {
      height: 78px;
      overflow: hidden;
      ul {
        transition: transform ease .3s;
        li {
          padding: 3px 20px;
          line-height: 20px;
          color: #fff;
          .user {
            color: #f3e969;
          }
        }
      }
    }
  }
</style>
